<template>
  <div class="shop">
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input
            v-model="formInline.fitName"
            placeholder="请输入商品名称"
            clearable
            @change="handlergetList"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品型号">
          <el-input
            v-model="formInline.fitModelName"
            placeholder="请输入商品型号"
            clearable
            @change="handlergetList"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品设备型号">
          <el-input
            v-model="formInline.devModel"
            placeholder="请输入商品设备型号"
            clearable
            @change="handlergetList"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handlergetList">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%;">
        <el-table-column prop="no" label="序号" width="180" align="center">
        </el-table-column>
        <el-table-column label="商品信息" width="480">
          <template slot-scope="scoped">
            <div class="product">
              <div class="product_inner">
                <div class="product_left">
                  <img
                    :src="scoped.row.fitImg"
                    style="width;60px;height:60px"
                    alt=""
                  />
                </div>
                <div class="product_right">
                  <div>商品名称:{{ scoped.row.fitName }}</div>
                  <div>商品型号:{{ scoped.row.fitModelName }}</div>
                  <div>使用设备:{{ scoped.row.deviceModelName }}</div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="fitPrice" label="商品价格(/元)" align="center">
        </el-table-column>
        <el-table-column
          prop="inventory"
          label="库存"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column label="购买数量" align="center">
          <template slot-scope="shop">
            <div>
              <i
                class="el-icon-circle-plus"
                style="font-size:40px;cursor: pointer;"
                @click="handlerAddshop(shop.row)"
              ></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="margin-bottom: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="formInline.pageSize"
          :current-page="formInline.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>

      <!-- 购物车 -->
      <div class="shop_car">
        <!-- 购物车icon -->
        <div class="shop_car_left">
          <i
            class="el-icon-shopping-cart-2"
            style="font-size:40px;cursor: pointer;"
            @click="handlershowlist"
          ></i>
          <i class="shop_num">{{ shopcount }}</i>
        </div>
        <!-- 结算 -->
        <div class="shop_car_right">
          <el-button type="primary" @click="handlergo">去结算</el-button>
        </div>
      </div>
      <!-- 购物车的遮罩层 -->

      <el-drawer
        :visible.sync="showzhe"
        :direction="direction"
        :with-header="false"
        :show-close="false"
        size="50%"
      >
        <div class="show_drawer">
          <div class="show_drawer_top">
            <div style="cursor: pointer;" @click="handlerclearShoppingCar">
              <i class="el-icon-delete"></i>
              清空
            </div>
          </div>
          <div class="show_drawer_center">
            <div
              class="show_drawer_center_inner"
              v-for="item in shoplist"
              :key="item.id"
            >
              <div class="show_drawer_center_left">
                <img :src="item.fitImg" alt="" style="width:94px;height:50px" />
                <div>
                  <ul>
                    <li>
                      商品名称:{{
                        item.fitName == null ? "暂无商品名称" : item.fitName
                      }}
                    </li>
                    <li>
                      商品型号:{{
                        item.fitModelName == null
                          ? "暂无商品型号"
                          : item.fitModelName
                      }}
                    </li>
                    <li>
                      适用设备:{{
                        item.deviceModelName == null
                          ? "暂无适用设备"
                          : item.deviceModelName
                      }}
                    </li>
                    <li style="color:red">
                      ¥
                      <span style="font-size:20px;color:red">{{
                        item.subtotal
                      }}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="show_drawer_center_right">
                <div class="show_drawer_center_right_inner">
                  <i
                    class="el-icon-remove show_drawer_center_right_inner_jian"
                    style="cursor: pointer;"
                    @click="handlershopchange(item, 2)"
                  ></i>
                  <input
                    type="text"
                    class="show_drawer_center_right_inner_word"
                    v-model="item.number"
                    @change="handlerNum(item, item.number)"
                  />
                  <i
                    class="el-icon-circle-plus show_drawer_center_right_inner_jia"
                    style="cursor: pointer;"
                    @click="handlershopchange(item, 1)"
                  ></i>
                </div>
              </div>
            </div>
          </div>
          <div class="show_drawer_bottom shop_car">
            <!-- 购物车icon -->
            <div class="shop_car_left">
              <i
                class="el-icon-shopping-cart-2"
                style="font-size:40px;cursor: pointer;"
                @click="handlershowlist"
              ></i>
              <i class="shop_num">{{ shopcount }}</i>
            </div>
            <!-- 结算 -->
            <div class="shop_car_right">
              合计:¥
              <b style="font-size:30px;margin-right:20px">{{ shopTotal }}</b>
              <el-button type="primary" @click="handlergo">去结算</el-button>
            </div>
          </div>
        </div>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import { TimeSelect } from "element-ui";
import {
  userMarketList,
  getShoppingCar,
  changeShoppingCar,
  clearShoppingCar
} from "../../utils/api";
export default {
  data() {
    return {
      formInline: {
        pageNumber: 1,
        pageSize: 10,
        fitName: "",
        fitModelName: "",
        devModel: ""
      },
      tableData: [], //商品数据
      count: 0, //商品总数
      shoplist: [], //购物车的数据
      shopcount: 0, //购物车的总数
      showzhe: false, //遮罩层
      direction: "btt",
      shopTotal: 0
    };
  },
  created() {
    this.handlergetList();
    this.handlershop();
  },
  methods: {
    //   商品列表
    handlergetList() {
      this.postRequest(userMarketList, this.formInline).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.count = res.data.count;
        }
      });
    },

    // 点击商品添加到购物车
    handlerAddshop(row) {
      const params = {
        goodsId: row.id,
        number: 1,
        type: 1,
        goodsType: 2
      };
      this.postRequest(changeShoppingCar, params).then(res => {
        if (res.code == 200) {
          this.$message.success("添加购物车成功");
          this.handlershop();
        }
      });
      //   changeShoppingCar;
    },
    // 点击显示购物车列表
    handlershowlist() {
      this.showzhe = !this.showzhe;
      this.showcar = !this.showcar;
      this.handlershop();
    },
    // 获取购物车数据
    handlershop() {
      this.postRequest(getShoppingCar, {
        pageNumber: 1,
        pageSize: 100
      }).then(res => {
        if (res.code == 200) {
          this.shoplist = res.data.list;
          this.shopcount = res.data.count;
          this.shopTotal = res.data.total;
        }
      });
    },
    //购物车中减去按钮
    handlershopchange(row, num) {
      const params = {
        goodsId: row.goodsId,
        number: 1,
        type: num,
        goodsType: 2
      };
      this.postRequest(changeShoppingCar, params).then(res => {
        if (res.code == 200) {
          this.handlershop();
        }
      });
    },
    handlerNum(row, val) {
      const params = {
        goodsId: row.goodsId,
        number: val,
        type: 3,
        goodsType: 2
      };
      this.postRequest(changeShoppingCar, params).then(res => {
        if (res.code == 200) {
          this.handlershop();
        }
      });
    },
    // 点击清空购物车
    handlerclearShoppingCar() {
      const result = this.shoplist.map(item => {
        return item.id;
      });

      this.$confirm("您确定清空购物车吗?, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(clearShoppingCar, {
            delCar: JSON.stringify(result)
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "清空购物车成功!"
              });
              this.showzhe = false;
              this.handlergetList();
              this.handlershop();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消清空购物车"
          });
        });
    },

    //商品的分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.handlergetList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.handlergetList();
    },
    handlergo() {
      this.$router.push("/shopDetial");
    }
  }
};
</script>

<style lang="less" scoped>
.shop {
  position: relative;
  .product {
    .product_inner {
      display: flex;
      flex-direction: row;

      justify-content: center;
      .product_left {
        width: 60px;
        height: 60px;
        margin: 0 30px;
      }
      .product_right {
        font-size: 12px;
      }
    }
  }
  .shop_car {
    margin-top: 40px;
    position: relative;
    bottom: 0;
    width: 95%;
    height: 40px;
    background: #f2f5fc;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    margin: 300px 0 0 auto;
    .shop_car_left {
      position: relative;

      .shop_num {
        display: block;
        width: 15px;
        height: 15px;
        background: red;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        line-height: 15px;
        position: absolute;
        top: -2px;
        right: -5px;
        font-size: 12px;
        font-style: normal;
      }
    }
    .shop_car_right {
    }
  }
  .show_drawer {
    display: flex;
    flex-direction: column;
    clear: both;
    .show_drawer_top {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #000000;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      padding-right: 30px;
    }
    .show_drawer_center {
      height: 300px;
      overflow-y: scroll;
      margin-top: 30px;
      margin-left: 40px;
      margin-right: 20px;
      .show_drawer_center_inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .show_drawer_center_left {
          display: flex;
          flex-direction: row;
          font-size: 13px;
          img {
          }
          ul {
            margin-left: 20px;
            li {
              line-height: 20px;
            }
          }
        }
        .show_drawer_center_right {
          .show_drawer_center_right_inner {
            display: flex;
            flex-direction: row;
            .show_drawer_center_right_inner_jian {
              font-size: 30px;
            }
            .show_drawer_center_right_inner_word {
              width: 50px;
              border: none;
              font-size: 20px;
              text-align: center;
            }
            .show_drawer_center_right_inner_jia {
              font-size: 30px;
            }
          }
        }
      }
    }
    .show_drawer_bottom {
      margin: 0 auto;
    }
  }
}
</style>
